<template>
  <!-- 安全生产日表单弹窗 -->
  <el-dialog
    v-model="visibleDialog"
    :title="props.title"
    width="20%"
    draggable
    @close="closeDialog"
  >
  <el-descriptions
    class="margin-top"
    title=""
    :column="1"
    size="large"
    v-show="props.isReadonly"
    border
  >
    <el-descriptions-item>
        <template #label>
          <div class="cell-item">安全生产日期</div>
        </template>
        <div style="width: 50%; word-break: break-all">
          {{ formData.productionDay.split(" ")[0] }}
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">历史最高安全天数</div>
        </template>
        <div style="width: 50%; word-break: break-all">
          {{ formData.maxDay }}
        </div>
      </el-descriptions-item>
  
    </el-descriptions>
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="140" v-show="!props.isReadonly">
      <el-row>
      <el-col :span="24">
      <el-form-item label="安全生产日期" prop="productionDay">
        <el-date-picker
          v-model="formData.productionDay"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="请选择安全生产日期"
          style="width: 100%"
        />
        </el-form-item>
      </el-col>
      <el-col :span="24">
      <el-form-item label="历史最高安全天数" prop="maxDay">
      <el-input v-model="formData.maxDay" placeholder="请输入历史最高安全天数" clearable/>
        </el-form-item>
      </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button v-if="!props.isReadonly" type="primary" :loading="loading" @click="handleSubmit">确 定</el-button>
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
  import request from "@/utils/request";
  import {useDictStoreHook} from "@/store/modules/dictionary"; // 引入
  const dictionaryStore = useDictStoreHook();

  defineOptions({
    name: "MESMESSAFETYPRODUCTIONDAYADDORUPDATE",
    inheritAttrs: false,
  });

  const emit = defineEmits(["reset-table", "change-visible"]);

  const props = defineProps({
    visible: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    title: {
      type: String,
      default: () => {
        return "";
      },
    },
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
    isReadonly: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
  });

  const visibleDialog = ref(false);
  watch(
    () => props.visible,
    (newVal: boolean) => {
      visibleDialog.value = newVal;
      setTimeout(() => {
        formRef.value.clearValidate();
      }, 50);
    }
  );

  const rules = reactive({
    productionDay: [
      { required: true, message: "请选择安全生产日期", trigger: "change"}
    ],
    maxDay: [
      { required: true, message: "请输入历史最高安全天数", trigger: "blur"},
      { pattern: /^[+]?\d+?(e[+]?\d+)?$/, message: "请输入正整数", trigger: "blur"}
    ],
  });

  const formRef = ref(ElForm);

  let formData = reactive({
    id: "",
    productionDay: "",
    maxDay: "",
    currentDay: "",
    version: "",
    remarks: "",
    createTime: "",
    createdUserId: "",
    createdUserName: "",
    lastUpdateTime: "",
    lastUpdatedUserId: "",
    lastUpdatedUserName: "",
    enabled: "",
    deleted: "",
  });

  watch(
    () => props.data,
    (newVal: any) => {
      formData.id = ""
      if (newVal?.id) {
        const {
          id,
          productionDay,
          maxDay,
          currentDay,
          version,
          remarks,
          createTime,
          createdUserId,
          createdUserName,
          lastUpdateTime,
          lastUpdatedUserId,
          lastUpdatedUserName,
          enabled,
          deleted,
        } = newVal;
        Object.assign(formData, {
          id,
          productionDay,
          maxDay,
          currentDay,
          version,
          remarks,
          createTime,
          createdUserId,
          createdUserName,
          lastUpdateTime,
          lastUpdatedUserId,
          lastUpdatedUserName,
          enabled,
          deleted,
        });
      }
    }
  );

  /** 关闭表单弹窗 */
  function closeDialog() {
    visibleDialog.value = false;
    emit("change-visible", false);
    resetForm();
  }

  /** 重置表单 */
  function resetForm() {
    formRef.value.resetFields();
    formRef.value.clearValidate();
    formData.id = ""
    formData.productionDay = ""
    formData.maxDay = ""
    formData.currentDay = ""
    formData.version = ""
    formData.remarks = ""
    formData.createTime = ""
    formData.createdUserId = ""
    formData.createdUserName = ""
    formData.lastUpdateTime = ""
    formData.lastUpdatedUserId = ""
    formData.lastUpdatedUserName = ""
    formData.enabled = ""
    formData.deleted = ""
  }

  const loading = ref(false);

  /** 安全生产日保存提交 */
  function handleSubmit() {
    formRef.value.validate(async (valid: any) => {
      if (valid) {
        loading.value = true;
        const text = formData.id ? "编辑" : "新增";
        await request({
          url: "/mes/messafetyproductionday/save",
          method: "post",
          data: formData,
        }).finally(() => {
          loading.value = false;
        });
        ElMessage.success(text + `成功`);
        closeDialog();
        emit("reset-table", formData.id);
      }
    });
  }


  // 组件销毁时调用
  onBeforeUnmount(() => {
    visibleDialog.value = false;
    emit("change-visible", false);
  });


</script>
